import './centermu.css'
import dingweinor from '../../../assets/images/dingwei_nor.png'
import dingweihov from '../../../assets/images/dingwei_hov.png'
import fenxinor from '../../../assets/images/fenxi_nor.png'
import fenxihov from '../../../assets/images/fenxi_hov.png'
import huaxiangnor from '../../../assets/images/huaxiang_nor.png'
import huaxianghov from '../../../assets/images/huaxiang_hov.png'
import jiankongnor from '../../../assets/images/jiankong_nor.png'
import jiankonghov from '../../../assets/images/jiankong_hov.png'
import tingchenor from '../../../assets/images/tingche_nor.png'
import tingchehov from '../../../assets/images/tingche_hov.png'
import toukuinor from '../../../assets/images/toukui_nor.png'
import toukuihov from '../../../assets/images/toukui_hov.png'
import { useEffect, useRef, useState } from 'react'

const Centermu=()=>{
    const[ data,setData]=useState([
        {
            id:1,
            url:dingweinor,
            hov:dingweihov,
            text:'可视化作战平台',
            isBule:false
        },
        {
            id:2,
            url:fenxinor,
            hov:fenxihov,
            text:'重点车辆监管系统',
            isBule:false
        },
        {
            id:3,
            url:huaxiangnor,
            hov:huaxianghov,
            text:'交通安全画像系统',
            isBule:false
        },
        {
            id:4,
            url:tingchenor,
            hov:tingchehov,
            text:'重点车辆监管系统',
            isBule:false
        },
        {
            id:5,
            url:toukuinor,
            hov:toukuihov,
            text:'骑车未带头盔识别系统',
            isBule:false
        },{
            id:6,
            url:jiankongnor,
            hov:jiankonghov,
            text:'交通态势监控系统',
            isBule:false
        },
    ])

    const cenbox=useRef(null)

    useEffect(()=>{
        // 遍历所有box下的子标签使图片的出发时间不同
        for(let a=0;a<cenbox.current.children.length;a++){
            cenbox.current.children[a].style['animation-delay']= `${-5- a * 3.3}s,-${a * 3.3}s,-${a * 3.3}s`
        }
    },[])

    // 事件函数  鼠标移入
    const onmouseenter=(id)=>{
        // 动画停止
         for(let a=0;a<cenbox.current.children.length;a++){
            cenbox.current.children[a].style['animation-play-state']= `paused`
        }
        // 根据id找到对应的数据
        let xuandData=data.find(item=>item.id===id)
        // 重新设置这个数据的颜色 改变图片颜色
        xuandData.isBule=!xuandData.isBule
       
        // 监听数据 重新渲染
        setData([...data])
    }
    // 鼠标移出
    const onmouseleave=(id)=>{
        // 动画继续
         for(let a=0;a<cenbox.current.children.length;a++){
            cenbox.current.children[a].style['animation-play-state']= `running`
        }
        // 根据id找到对应的数据
        let xuandData=data.find(item=>item.id===id)
        // 重新设置这个数据的颜色
        xuandData.isBule=!xuandData.isBule
       
        // 监听数据 重新渲染
        setData([...data])
    }

    // 点击图片出现弹窗
    const onclick=(id)=>{
         let xuandData=data.find(item=>item.id===id)
         alert(xuandData.text)
    }
    return(
        <div className="cenbox" ref={cenbox}>
           {
            data.map((item)=>{
                return(
                    <div className="box-item" key={item.id} onMouseEnter={(e)=>onmouseenter(item.id)} onMouseLeave={(e)=>onmouseleave(item.id)} onClick={()=>onclick(item.id)}>
                        <img src={item.isBule?item.hov:item.url} alt=""/>
                        <p>{item.text}</p>
                    </div>
                )
            })
           }
        </div>
    )
}
export default Centermu;